@import '@common/styles/index.scss';
@import '@common/styles/index.scss';
@mixin captchaBtn {
  position: absolute;
  right: 8px;
  bottom: 0;
  text-align: center;
  line-height: 44px;
  border-radius: $border-radius-small;
  font-size: $font-size-base;
  color: $icon-color;
  cursor: pointer;
  padding-right: $padding-2n;
}

.userMobileContent {
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: rem($margin-6n);
    height: rem(22);
    line-height: rem(22);
  }
  .titleValue {
    flex: 1;
    text-align: center;
    font-size: rem($font-size-middle);
    color: $text-color-primary;
    font-weight: $font-weight-regular;
    letter-spacing: 1px;
  }
  .inputItem {
    margin-bottom: rem($margin-6n);
    .labelName {
      font-size: rem($font-size-base);
      color: $text-color-regular;
      height: rem(20);
      line-height: rem(20);
    }
    .labelValue {
      position: relative;
    }
    :global {
      .dzq-input {
        width: 100%;
        height: rem(44);
        margin-top: rem($margin-4n);
      }
      .dzq-input__inner {
        width: 100%;
        height: rem(44);
        padding: rem($padding-3n) rem($padding-4n);
      }
      .dzq-icon {
        line-height: rem(44);
      }
    }
  }
  .inputMiddle {
    margin-bottom: rem($margin-4n);
  }
  .mobileItem {
    position: relative;
    .verifyCode {
      position: absolute;
      top: rem(4);
      right: rem(4);
    }
  }
  .sendCaptcha {
    @include captchaBtn;
    color: $primary-color;
    &:hover {
      color: $text-color-secondary;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn {
    width: rem(248);
    height: rem(36);
    border-radius: rem(5);
    line-height: rem(36);
    padding: 0;
  }
}

.bgBtnColor {
  :global {
    .dzq-button--primary.is-mouseenter {
      @include button-primary();
    }
  }
}

.btnStyle {
  border: none;
  color: $text-color-secondary;
  font-size: rem($font-size-primary);
}
